<template>
	<view class="page">
		<view class="topVue text-center">
			<text style="font-weight: 700; font-size: 36rpx; color: #333333;">{{ $t('钱包') }}</text>
		</view>
		<u-gap height="92"></u-gap>

		<view class="banner margin0 flex-column align-center flex-between flex-center">
			<text style="font-size: 30rpx; color: #002E8D;">{{ $t('USDT余额') }}</text>
			<u-gap height="20"></u-gap>
			<text style="font-weight: 700; font-size: 60rpx; color: #002E8D;">${{ usdtObj.balance | number(4) }}</text>
		</view>

		<view class="btnVue flex-between margin30">
			<view class="btn" @click="$tools.route('./charge')">{{ $t('充值') }}</view>
			<view class="btn" @click="$tools.route('./withdraw')">{{ $t('提现') }}</view>
		</view>

		<view class="thVue flex align-center padding-row30 margin30">
			<view class="line"></view>
			<text style="font-size: 30rpx; color: #333333; padding-left: 8rpx; font-weight: 600;">{{ $t('资产列表') }}</text>
		</view>

		<view class="item margin30">
			<view class="itemTop flex-between align-center">
				<view class="flex align-center">
					<image src="/static/wallet/jnp.png" style="width: 48rpx; height: 48rpx;"></image>
					<text style="font-size: 30rpx; color: #000000; padding-left: 10rpx;">{{ $t('可提现JNP数量') }}</text>
				</view>
				<text style="font-size: 32rpx; color: #000000;">{{ jnpObj.balance | number(2) }}</text>
				<text style="font-size: 26rpx; color: #333333;">≈$ {{ jnpObj.balance * price | number(2)}}</text>
			</view>
			<view class="itemBot flex align-center">
				<view class="bot w50">
					<text style="font-size: 26rpx; color: #999999;">{{ $t('已释放JNP') }}</text>
					<u-gap height="20"></u-gap>
					<view class="flex-between align-center">
						<text style="font-size: 32rpx; color: #000000;">{{ releaseAmount | number(2) }}</text>
						<text style="font-size: 26rpx; color: #333333;">≈${{ releaseAmount * price | number(2) }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bot w50">
					<text style="font-size: 26rpx; color: #999999;">{{ $t('待释放JNP') }}</text>
					<u-gap height="20"></u-gap>
					<view class="flex-between align-center">
						<text style="font-size: 32rpx; color: #000000;">{{ lockAmount | number(2) }}</text>
						<text style="font-size: 26rpx; color: #333333;">≈${{ lockAmount * price | number(2) }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="item flex-between align-center margin30" style="padding: 30rpx">
			<text style="font-size: 32rpx; color: #000;">{{ $t('持有卡牌数量') }}</text>
			<view class="flex">
				<text style="font-size: 32rpx; color: #000;">{{ cardNum }}{{ $t('张') }}</text>
				<text style="font-size: 32rpx; color: #666666;">(≈${{ cardPrice }})</text>
			</view>
		</view>

		<view class="item margin30" v-if="myList.length>0">
			<view class="th flex align-center">
				<view class="li w25">{{ $t('编号') }}</view>
				<view class="li w50">{{ $t('时间') }}</view>
				<view class="li w25 text-right">{{ $t('价格') }}</view>
			</view>
			<view class="td flex align-center" v-for="(item, index) in myList" :key="index">
				<view class="li w25">{{ item.serialNo }}</view>
				<view class="li w50">{{ item.lastTradeAt }}</view>
				<view class="li w25 text-right">{{ item.price }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import init from "../../index";
	export default {
		data() {
			return {
				jnpObj: {
					balance: 0,
				},
				usdtObj: {
					balance: 0,
				},
				price: 0,
				releaseAmount: 0,
				lockAmount: 0,
				cardNum: 0,
				cardPrice: 0,
				myList: []
			};
		},
    async onLoad() {
      this.getJNPPrice()
      this.getList()
      this.getPositionInfo()
      this.getInfo()
		},
		methods: {
			async getList(){
				const res1 = await this.$request("/front/user/userWallet", {
					currency: 1
				})
				const res2 = await this.$request("/front/user/userWallet", {
					currency: 2
				})
				if(res1.code===0) this.usdtObj = res1.data
				if(res2.code===0) this.jnpObj = res2.data
			},
			async getJNPPrice(){
				const res = await this.$request("/front/user/jnpPrice")
				if (res.code === -2) {
				  await init.initAddress();
				}
				if(res.code===0) this.price = res.data
			},
			async getPositionInfo(){
				const res = await this.$request("/front/user/positionInfo")
				if(res.code===0) {
					this.releaseAmount = res.data.releaseAmount
					this.lockAmount = res.data.lockAmount
				}
			},
			async getInfo(){
				const res = await this.$request("/front/card/cardInfo")
				if(res.code===0) {
					console.log(res)
					this.myList = res.data.list
					this.cardNum = res.data.num
					this.cardPrice = res.data.price
				}
			}
		}
	}
</script>

<style lang="less">
	.topVue {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(to bottom, #E3EEFF, #EBF3FF);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.banner {
		width: 690rpx;
		height: 250rpx;
		background: url("../../static/wallet/banner.png") no-repeat;
		background-size: 100% 100%;
	}

	.btnVue {
		width: 690rpx;
		height: 80rpx;
		.btn {
			width: 324rpx;
			height: 80rpx;
			background: #4D9FED;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.btn:nth-child(2) {
			background: #2EC2D9;
		}
	}

	.thVue {
		width: 100%;
		height: 32rpx;
		.line {
			width: 6rpx;
			height: 30rpx;
			background: #4D9FED;
			border-radius: 8rpx;
		}
	}

	.item {
		width: 690rpx;
		background: #EDF4FF;
		border-radius: 16rpx;
		padding: 0 30rpx;
		.itemTop {
			width: 100%;
			height: 105rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
		}
		.line {
			width: 1rpx;
			height: 110rpx;
			background: rgba(0,0,0,0.1);
			margin: 0 40rpx;
		}
		.itemBot {
			width: 100%;
			height: 160rpx;
		}
		.th {
			width: 100%;
			height: 60rpx;
			.li {
				font-size: 26rpx;
				color: #999999;
			}
		}
		.td {
			width: 100%;
			height: 60rpx;
			.li {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
</style>
